<template>
	<view class=" gui-relative">


		<view v-if="goods.lei==1" class="gui-padding gui-flex gui-nowrap gui-space-between gui-align-items-center gui-border-t">
			<view style="width: 8%;"><image src="../../static/location.png" class="w100" style="vertical-align: middle;" mode="widthFix"></image></view>
			<view style="width: 80%;" @tap="address">
				<view v-if="user.sheng_html">
					<view class="gui-flex gui-space-between gui-align-items-center">
						<view class="gui-h4 gui-bold">收货人：{{ user.name }}</view>
						<view class="gui-h4 gui-bold">{{ user.phone }}</view>
					</view>
					<view class="gui-h6 gui-margin-top">
						收货地址:
						<text>{{ user.sheng_html }}-{{ user.address }}</text>
					</view>
				</view>
				<view v-else>
					请选择地址
				</view>
			</view>
			<view style="width: 8%;"><text class="gui-grids-icon gui-icons">&#xe601;</text></view>
		</view>
		<view v-if="goods.lei==4" class="gui-padding gui-flex gui-nowrap gui-space-between gui-align-items-center gui-border-t">
			<view style="width: 8%;"><image src="../../static/location.png" style="vertical-align: middle;" class="w100" mode="widthFix"></image></view>
			<view style="width: 80%;" @tap="tuanaddress">
				<view v-if="user.tuan_address">
					<view class="gui-flex gui-space-between gui-align-items-center">
						<view class="gui-h4 gui-bold">收货电话：{{ user.phone }}</view>
						<view class="gui-h4 gui-bold"></view>
					</view>
					<view class="gui-h6 gui-margin-top">
						取货地址:
						<text>{{ user.tuan.title }}</text>
					</view>
				</view>
				<view v-else>
					请选择地址
				</view>
			</view>
			<view style="width: 8%;"><text class="gui-grids-icon gui-icons">&#xe601;</text></view>
		</view>

		<view class="gui-bg-gray h"></view>
		<view class="">
			<view class="gui-padding gui-bg-gray gui-flex gui-nowrap gui-space-between gui-align-items-center">
				<view style="width: 20%;"><image :src="imgServer + goods.goods_img" class="w100" mode="widthFix"></image></view>
				<view style="width: 80%;padding-left: 30rpx;">
					<view class="gui-h5 font">{{ goods.goods_name }}</view>
					<view class="gui-flex gui-margin-top gui-nowrap gui-space-between gui-align-items-center">
						<view class="gui-color-red">￥{{goods.money}}</view>
						<view>x{{ num }}</view>
					</view>
				</view>
			</view>
			<view class=" gui-paddingmy gui-flex gui-nowrap gui-space-between gui-align-items-center gui-border-b">
				<view class="gui-h6">购买数量</view>
				<view class=""><gui-step-box @change="change" :value="num"></gui-step-box></view>
			</view>
			<view class=" gui-paddingmy gui-flex gui-nowrap gui-space-between gui-align-items-center gui-border-b">
				<view class="gui-h6">选择规格</view>
				<view class="gui-h6">{{ attr ? attr : '无' }}</view>
			</view>
			<view class=" gui-paddingmy gui-flex gui-nowrap gui-space-between gui-align-items-center gui-border-b">
				<view class="gui-h6">店铺优惠</view>
				<view class="">无</view>
			</view>

			<view class=" gui-paddingmy gui-flex gui-nowrap gui-space-between gui-align-items-center gui-border-b">
				<view class="gui-h6">配送方式</view>
				<view class="gui-h6">快递 {{ goods.postage ? goods.postage : 0 }} 元</view>
			</view>
		</view>
		<view class="gui-bg-gray h"></view>
		<view style="padding:10rpx 30rpx;">
			<text class="gui-h6 gui-color-gray gui-bold">订单备注</text>
			<textarea v-model="beizhu" value="" placeholder="说点什么..." class="gui-textarea gui-bg-gray gui-border-box gui-margin-top" style="width:690rpx;" />
		</view>
		<!-- <view style="padding:10rpx 30rpx;">
			<text class="gui-h6 gui-color-gray gui-bold">登陆密码</text>
			<input type="password" class="gui-form-input gui-bg-gray" style="padding: 15rpx;" v-model="password1" placeholder="请输入登陆密码" />
		</view> -->
		<view class="gui-bg-gray h"></view>
		<view class="gui-padding">
			<view class="gui-h4">支付方式</view>
			<view class="gui-margin-top" style="margin-bottom: 20rpx;">
				<radio-group @change="radiochange">
					<!-- <label class="gui-check-item gui-check-item-y">
						<view class=" gui-text gui-primary-color gui-h4 gui-flex " style="line-height: 35rpx;"> 
							<radio checked color="#f04345" value="3"></radio>
							<view style="width: 20px;margin-right: 15rpx;margin-left: 10rpx;" >
								<image src="../../static/ji.png" class="w100" style="vertical-align: middle;" mode="widthFix"></image></view>
							<text>ALG支付</text>
						</view>
					</label> -->
					<!-- 	<label class="gui-check-item gui-check-item-y">
						<view class=" gui-text gui-primary-color gui-h4 gui-flex " style="line-height: 35rpx;"> 
							<radio color="#f04345" value="1"></radio>
							<view style="width: 20px;margin-right: 15rpx;margin-left: 10rpx;" >
								<image src="../../static/zhi.png" class="w100" style="vertical-align: middle;" mode="widthFix"></image></view>
							<text>支付宝</text>
						</view>
					</label> -->
					<label class="gui-check-item gui-check-item-y" style="margin-bottom: 10rpx;">
						<view class=" gui-text gui-primary-color gui-h4 gui-flex ">
							<radio checked color="#f04345" value="2"></radio>
							<view style="width: 20px;margin-right: 15rpx;margin-left: 10rpx;">
								<image src="../../static/wei.png" class="w100" style="vertical-align: middle;" mode="widthFix"></image>
							</view>
							<text>微信</text>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="gui-bg-gray" style="height: 100rpx;"></view>

		<view class="gui-position-fixed gui-border-t gui-flex gui-space-between gui-align-items-center mymoney">
			<view class="mypadd">
				<view>
					合计：
					<text class="gui-color-red gui-bold gui-h2" style="margin-left: 20rpx;">{{ (num * goods.money).toFixed(2) }}</text>
				</view>
			</view>
			<view class="mypadd"><button @tap="tijiao()" class="button">提交订单</button></view>
		</view>
	</view>
</template>
<script>
let graceJS = require('@/lizhili/js/grace.js');
let common = require('@/common.js');
export default {
	data() {
		return {
			id: 0,
			num: 0,
			user: '',
			goods: '',
			imgServer: '',
			pay: 2,
			beizhu: '',
			attr: '',
			password1: '',
		};
	},
	onLoad(e) {
		this.imgServer = common.obs;
		this.id = e.id;
		this.attr = e.attr;

		this.num = Number(e.num);
		
	},
	onShow() {
		if(this.id){
			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_pay_show',
					id: this.id
				},
				false,
				res => {
					if (res.code == 1) {
						this.goods = res.data;
						this.user = res.user;
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取数据失败'
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		}
	},
	methods: {
		radiochange(e) {
			this.pay = e.detail.value;
		},
		tijiao() {
			if (!this.pay) {
				uni.common.msg('请选择支付类型后提交！');
				return;
			}
			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'update_pay_order',
					id: this.id,
					num: this.num,
					pay: this.pay,
					beizhu: this.beizhu,
					attr: this.attr,
					password1: this.password1
				},
				false,
				res => {
					//console.log(res,1111);
					if (res.code == 1) {
						this.wx_pay(res.data);
					} else if (res.code == 2) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					} else if (res.code == 4) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					} else if (res.code == 3) {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							success: function(res) {
								uni.redirectTo({
									url: 'payresult?type=1'
								});
							},
							fail: function(err) {
								uni.redirectTo({
									url: 'payresult?type=0'
								});
							}
						});
					} else {
						uni.showToast({
							title: '提交数据失败',
							icon: 'none'
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		wx_pay(config = []) {
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: config.timeStamp,
				nonceStr: config.nonceStr,
				package: config.package,
				signType: config.signType,
				paySign: config.paySign,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
					uni.redirectTo({
						url: 'payresult?type=1'
					});
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
					uni.redirectTo({
						url: 'payresult?type=0'
					});
				}
			});
		},
		change(e) {
			this.num = e[0];
		},
		address: function() {
			uni.navigateTo({
				url: '../my/info'
			});
		},
		tuanaddress: function() {
			uni.navigateTo({
				url: '../my/tuangou'
			});
		},
	}
};
</script>
<style>
.gui-segmented-control-item {
	color: #e15324;
	font-size: 26rpx;
	line-height: 66rpx;
} 
.gui-segmented-current {
	background-color: #e15324;
	color: #ffffff;
} 

.w100 {
	width: 100%;
	height: auto;
}
.h {
	height: 25rpx;
}
.gui-padding {
	padding: 20rpx;
}
.gui-paddingmy {
	padding: 20rpx;
}
.font {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.gui-grids-icon {
	font-size: 40rpx;
}
.gui-position-fixed {
	position: fixed;
	bottom: 0;
	width: 100%;
	/* color: red;
	background-color: #B2DFDB; */
}
.mymoney {
	height: 90rpx;
	background-color: #ffffff;
}
.mypadd {
	padding: 0 20rpx;
}
.button {
	background-color: #ea4444;
	color: #ffffff;
	text-decoration: none;
	padding: 2rpx 40rpx;
}
</style>
